<template>
  <div class="customer-card">
    <div class="card-item">
      <p>商机总金额（元）</p>
      <p>{{ numFormat(props.data?.business_total_money) }}</p>
    </div>
    <div class="card-item">
      <p>商机总数</p>
      <p>{{ numFormat(props.data?.business_num) }}</p>
    </div>
    <div class="card-item">
      <p>已赢单金额（元）</p>
      <p>{{ numFormat(props.data?.business_win_order_money) }}</p>
    </div>
    <div class="card-item">
      <p>累计互动次数</p>
      <p>{{ numFormat(props.data?.frequency_num) }}</p>
    </div>
    <div class="card-item">
      <p>累计跟进次数</p>
      <p>{{ numFormat(props.data?.follow_num) }}</p>
    </div>
    <div class="card-item">
      <p>累计聊天次数</p>
      <p>{{ numFormat(props.data?.message_count) }}</p>
    </div>
    <div class="card-item">
      <p>已添加企微员工数</p>
      <p>{{ numFormat(props.data?.add_qw_num) }}</p>
    </div>
    <div class="card-item">
      <p>所在群</p>
      <p>{{ numFormat(props.data?.group_num) }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { numFormat } from '@/utils/utils'
const props = defineProps(['data'])
</script>

<style lang="scss" scoped>
.customer-card {
  display: flex;
  // justify-content: space-around;
  padding: 25px 25px;

  white-space: nowrap;
  // overflow: scroll;
  overflow-x: auto;
  border-bottom: 2px solid #ffc69e !important;

  .card-item {
    flex: auto;
    text-align: center;
    margin-right: 25px;

    P {
      margin: 0;

      &:nth-of-type(1) {
        margin-bottom: 10px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #35383a;
        line-height: 16px;
      }
      &:nth-of-type(2) {
        font-size: 46px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #ff6b00;
        line-height: 46px;
      }
    }
  }

  .divider {
    height: 80px;
    margin: 0;
    background: #f0f0f0;
  }
}
</style>
